<template>
  <el-pagination
    v-model:current-page="pageForm.pageNum"
    v-model:page-size="pageForm.pageSize"
    :page-sizes="[5, 10, 15, 20]"
    :small="false"
    :background="true"
    layout="total, sizes, prev, pager, next, jumper"
    :total="props.total"
    class="pagination bs-bb"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />
</template>

<script setup>
// ———————————— api ————————————
// ———————————— components ————————————
// —————————— vue & pinia ——————————
import { ref, reactive, toRefs, watch, computed } from "vue";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();
const props = defineProps({
  total: {
    type: Number,
    default: 0,
  },
});
const emit = defineEmits(["changeSize", "changeCurrent"]);
// —————————— data & handle ——————————
const pageForm = reactive({ pageNum: 1, pageSize: 10 });
const handleSizeChange = (size) => {
  emit("changeSize", size);
};
const handleCurrentChange = (num) => {
  emit("changeCurrent", num);
};
</script>
<style lang="scss" scoped>
.pagination {
  height: 42px;
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translate(-50%);
}
</style>
